import React, { PureComponent, Fragment } from 'react';
import {
  Switch,
} from 'antd';
import { connect } from 'dva';
import working from './../../images/working.png'
import echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import request from '@/utils/request';
import axios from 'axios';
import ExportMeterData from '../Owner/ExportMeterData';
@connect(({ pipe_home, loading }) => ({
  pipe_home,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: true,
      pipeData:[],
      pressData:[],
      flowerData:[],
      hammerData:[]
    };
  }


  componentDidMount() {
    const that=this;
    let pressData=[]
    let flowerData=[]
    let hammerData=[]
    for(let i=0;i<9;i++){
      pressData.push({
        value: (Math.random()*10).toFixed(2),
        label: `压力监测站点${i}`
      })
    }
    // setInterval(function() {
    //   let pressData2=[]
    //   for(let i=0;i<9;i++){
    //     pressData2.push({
    //       value: (Math.random()*10).toFixed(2),
    //       label: `压力监测站点${i}`
    //     })
    //   }
    //   that.setState({
    //     pressData:pressData2,
    //   })
    // },5000)
    for(let i=0;i<12;i++){
      flowerData.push({
        value: (Math.random()*10).toFixed(2),
        label: `流量监测站点${i}`
      })
    }
    for(let i=0;i<12;i++){
      hammerData.push({
        value: (Math.random()*10).toFixed(2),
        label: `水锤监测站点${i}`
      })
    }
    this.setState({
      pressData:pressData,
      flowerData,hammerData
    })
  }


  dynamic=()=>{
    const {  pipe_home: { data, pressVisiable } } = this.props;
    let yData = [];
    if(data.length===0){
      return {}
    }
    let barData = [];
    for(let i=0;i<data.length;i++){
      if(data[i].online_status=== -1){
        if(data[i].workstation_data&&data[i].workstation_data.pressure_sensor&&data[i].workstation_data.pressure_sensor.length!==0){
          barData.push({
            status: '-',
            value: data[i].workstation_data.pressure_sensor[0].parameters.pressure,
            label: data[i].name
          })
        }else{
          barData.push({
            status: '-',
            value: '-',
            label: data[i].name
          })
        }

      } else{
        if(data[i].workstation_data&&data[i].workstation_data.pressure_sensor&&data[i].workstation_data.pressure_sensor.length!==0){
          barData.push({
            status: data[i].workstation_data.pressure_sensor[0].parameters.pressure_status,
            value: data[i].workstation_data.pressure_sensor[0].parameters.pressure,
            label: data[i].name
          })
        }else{
          barData.push({
            status: 5,
            value: '-',
            label: data[i].name
          })
        }
      }
    }

    barData = barData.sort(function(a, b) {
      return b.value - a.value;
    });
    console.log('barData',barData)
    for (let j = 0; j < barData.length; j++) {
      if (j < 10) {
        yData.push('0' + j + barData[j].label);
      } else {
        yData.push(j + barData[j].label);
      }
    }
    let option = {
      backgroundColor: '#00013a',
      animation:false,
      title: [{
        show: true,
        text: '压力监测站点',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        x: 'left',
        left:20,
        top: 15
      }],
      xAxis: {
        show: false
      },
      grid: {
        left: "45%",
        top: 45,
        bottom:0
      },
      yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisLabel: {
          interval: 0,
          margin: 132,
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#f0515e',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            b: {
              color: '#fff',
              backgroundColor: '#24a5cd',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            c: {
              color: '#fff',
              backgroundColor: '#888888',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            }
          },
          formatter: function(params,index) {
            if(barData[index].status==='-'){
              return [
                '{c|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            }else if (Number(barData[index].status)!==0) {
              return [
                '{a|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            } else {
              return [
                '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            }
          }
        },
        data: yData
      },
      series: [{
        name: 'barSer',
        type: 'bar',
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 16,
        barGap: 0,
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = [{
                colorStops: [{
                  offset: 0,
                  color: '#f0515e'
                }, {
                  offset: 1,
                  color: '#ef8554'
                }]
              },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#3c38e4'
                  }, {
                    offset: 1,
                    color: '#24a5cd'
                  }]
                }, {
                  colorStops: [{
                    offset: 0,
                    color: '#888888'
                  }, {
                    offset: 1,
                    color: '#a2a2a2'
                  }]
                }
              ];
              if(barData[params.dataIndex].status==='-'){
                return colorList[2]
              }else if (Number(barData[params.dataIndex].status)!==0) {
                return colorList[0]
              } else {
                return colorList[1]
              }
            },
            barBorderRadius: [0, 15, 15, 0]
          }
        },
        label: {
          normal: {
            show: true,
            textBorderColor: '#333',
            textBorderWidth: 2,
            formatter: function(params) {
              return params.value + ' MPa'
            }
          }
        },
        data: barData.sort((a, b) => {
          return b.value - a.value;
        })
      }]
    };
    return option
  }
  dynamic2=()=>{
    const {  pipe_home: { flowMeterData, pressVisiable } } = this.props;
    let yData = [];
    console.log('flowMeterData',flowMeterData)
    if(flowMeterData.length===0){
      return {}
    }
    let barData = [];
    for(let i=0;i<flowMeterData.length;i++){
      if(flowMeterData[i].online_status=== -1){
        if(flowMeterData[i].workstation_data&&flowMeterData[i].workstation_data.flowmeter&&flowMeterData[i].workstation_data.flowmeter.length!==0){
          barData.push({
            status:'-',
            value: flowMeterData[i].workstation_data.flowmeter[0].parameters.instantaneous_flow,
            label: flowMeterData[i].name
          })
        }else{
          barData.push({
            status:'-',
            value: '-',
            label: flowMeterData[i].name
          })
        }
      }else{
        if(flowMeterData[i].workstation_data&&flowMeterData[i].workstation_data.flowmeter&&flowMeterData[i].workstation_data.flowmeter.length!==0){
          barData.push({
            status:0,
            value: flowMeterData[i].workstation_data.flowmeter[0].parameters.instantaneous_flow,
            label: flowMeterData[i].name
          })
        }else{
          barData.push({
            status:0,
            value: '-',
            label: flowMeterData[i].name
          })
        }
      }

    }
    console.log('barData',barData)
    for (let j = 0; j < barData.length; j++) {
      if (j < 10) {
        yData.push('0' + j + barData[j].label);
      } else {
        yData.push(j + barData[j].label);
      }
    }
    let option = {
      backgroundColor: '#00013a',
      title: [{
        show: true,
        text: '流量监测站点',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        x: 'left',
        left:20,
        top: 15
      }],
      xAxis: {
        show: false
      },
      grid: {
        left: "45%",
        top: 45,
        bottom:0
      },
      yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisLabel: {
          interval: 0,
          margin: 132,
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#f0515e',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            b: {
              color: '#fff',
              backgroundColor: '#24a5cd',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            c: {
              color: '#fff',
              backgroundColor: '#888888',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            }
          },
          formatter: function(params,index) {
            if(barData[index].status==='-'){
              return [
                '{c|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            }else {
              return [
                '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            }
          }
        },
        data: yData
      },
      series: [{
        name: 'barSer',
        type: 'bar',
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 16,
        barGap: 0,
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = [{
                colorStops: [{
                  offset: 0,
                  color: '#f0515e'
                }, {
                  offset: 1,
                  color: '#ef8554'
                }]
              },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#3c38e4'
                  }, {
                    offset: 1,
                    color: '#24a5cd'
                  }]
                }, {
                  colorStops: [{
                    offset: 0,
                    color: '#888888'
                  }, {
                    offset: 1,
                    color: '#a2a2a2'
                  }]
                }
              ];
              if(barData[params.dataIndex].status==='-'){
                return colorList[2]
              }else {
                return colorList[1]
              }
            },
            barBorderRadius: [0, 15, 15, 0]
          }
        },
        label: {
          normal: {
            show: true,
            textBorderColor: '#333',
            textBorderWidth: 2,
            formatter: function(params) {
              return params.value + '%'
            }
          }
        },
        data: barData.sort((a, b) => {
          return b.value - a.value;
        })
      }]
    };
    return option
  }
  dynamic3=()=>{
    var yData = [];
    var barData = this.state.hammerData;
    barData = barData.sort(function(a, b) {
      return b.value - a.value;
    });
    for (var j = 0; j < barData.length; j++) {
      if (j < 10) {
        yData.push('0' + j + barData[j].label);
      } else {
        yData.push(j + barData[j].label);
      }
    }

    var option = {
      backgroundColor: '#00013a',
      title: [{
        show: true,
        text: '水锤监测站点',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        x: 'left',
        left:20,
        top: 15
      }],
      xAxis: {
        show: false
      },
      grid: {
        left: "45%",
        top: 45,
        bottom:0
      },
      yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#00013a'
          }
        },
        axisLabel: {
          interval: 0,
          margin: 132,
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#f0515e',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            b: {
              color: '#fff',
              backgroundColor: '#24a5cd',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            }
          },
          formatter: function(params) {
            if (parseInt(params.slice(0, 2)) < 3) {
              return [
                '{a|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            } else {
              return [
                '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
              ].join('\n')
            }
          }
        },
        data: yData
      },
      series: [{
        name: 'barSer',
        type: 'bar',
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 16,
        barGap: 0,
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = [{
                colorStops: [{
                  offset: 0,
                  color: '#f0515e'
                }, {
                  offset: 1,
                  color: '#ef8554'
                }]
              },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#3c38e4'
                  }, {
                    offset: 1,
                    color: '#24a5cd'
                  }]
                }
              ];
              if (params.dataIndex < 3) {
                return colorList[0]
              } else {
                return colorList[1]
              }
            },
            barBorderRadius: [0, 15, 15, 0]
          }
        },
        label: {
          normal: {
            show: true,
            textBorderColor: '#333',
            textBorderWidth: 2,
            formatter: function(params) {
              return params.value + '%'
            }
          }
        },
        data: barData.sort((a, b) => {
          return b.value - a.value;
        })
      }]
    };
    return option
  }
  render() {
    const {  pipe_home: { flowMeterData, data } } = this.props;
    const { dispatch } = this.props;
    var zoomSize = 22;
    console.log('flowMeterData.length*30+50',flowMeterData.length*30+50)
    const that=this
    return <div  style={{display:'flex', minHeight:'100%',background:'#00013a', flexDirection: 'column'}}>
      {
        data.length>0&&
        <ReactEcharts
          option={this.dynamic()}
          style={{ height:`${data.length*30+50}px`, width: '350px' }}
          ref={node => { this.echartspie = node }}
          theme='my_theme'
          onEvents={{
            'click': (params)=>{
              console.log('click',params)
              let echarts_instance = this.echartspie.getEchartsInstance();
              // this.props.showPressPopup(params.data.emphasis.label)
            },
          }}
          //onChartReady={this.onChartReadyCallback}
          //onEvents={EventsDict}
        />
      }
      {
        flowMeterData.length>0&&
        <ReactEcharts
          option={this.dynamic2()}
          style={{ height:`${flowMeterData.length*30+50}px`, width: '350px' }}
          theme='my_theme'
          //onChartReady={this.onChartReadyCallback}
          //onEvents={EventsDict}
        />
      }
   {/*   {
        this.state.hammerData.length>0&&
        <ReactEcharts
          option={this.dynamic3()}
          style={{ height:`${this.state.hammerData.length*30+50}px`, width: '350px' }}
          theme='my_theme'
          //onChartReady={this.onChartReadyCallback}
          //onEvents={EventsDict}
        />
      }*/}
    </div>;
  }
}

export default BasicList;
